<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>音乐条</title>
	<style>
		*{padding:0;margin:0;}
		div{
			width:30px;
			height:0;
			float:left;
			margin-left:20px;
			margin-top:400px;
		}
	</style>
</head>
<body>
	<div style="background-color:pink" ></div>
	<div style="background-color:blue" ></div>
	<div style="background-color:orange" ></div>
	<div style="background-color:green" ></div>
	<button id="btn" onclick="demo()" >开始</button>
</body>
	<script>
		btn = document.getElementById("btn");
		list = document.getElementsByTagName("div");
		mytime=null;
		function func(){
			for(var i=0;i<list.length;i++){
				var su=Math.floor(Math.random()*200);
				list[i].style.height = su+"px";
				list[i].style.marginTop = 400-su+"px";
			}
		}
		function demo(){
			if(mytime==null){
				mytime=setInterval(func,100);
			}else{
				clearInterval(mytime);
				mytime=null;
			}
		}

	</script>
</html>